import React, { useRef, useImperativeHandle, forwardRef } from 'react';
import { Card, Button, Divider, Typography } from 'antd';

const { Title } = Typography;

const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    sayHello() {
      console.log('Hello from Child!');
    },
  }));
  return <div>Child Component</div>;
});

export function Parent() {
  const childRef = useRef(null);

  const handleClick = () => {
    childRef.current.sayHello();
  };

  return (
    <>
      <Title>React Hooks 系列 之 forwardRef</Title>
      <div>
        传递 ref 给 DOM 元素 ;forwardRef 的主要功能是将引用 (ref)
        从父组件转发到子组件。这对于访问子组件的 DOM 元素非常有用。
      </div>
      <div>React Hooks 系列 之 useImperativeHandle</div>
      <div>当你想从子组件向父组件暴露某些特定的方法时，可以使用 useImperativeHandle。</div>
      <div>
        useImperativeHandle 的第三个参数是一个依赖数组，与 useEffect 和 useMemo
        中的依赖数组类似。这个依赖数组决定了何时重新创建暴露给父组件的实例方法。当依赖数组中的值发生变化时，useImperativeHandle
        会重新执行。
      </div>
      <Child ref={childRef} />
      <button onClick={handleClick}>Call Child Method</button>
    </>
  );
}
